<!doctype html>
<html lang="en">
<head>
  
  <meta charset="utf-8" />
  <title>BIG Graph &middot; Isotope </title>
  
  <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  
  <link rel="stylesheet" href="../css/style.css" />
  
  <!-- scripts at bottom of page -->

</head>
<body class="custom-layout-modes ">
  
  <nav id="site-nav">
    <h1><a href="../index.html">Isotope</a></h1>

    <h2>Docs</h2>
    
    <ul>
      
        
          <li><a href="../docs/introduction.html">Introduction</a>
        
      
        
          <li><a href="../docs/options.html">Options</a>
        
      
        
          <li><a href="../docs/methods.html">Methods</a>
        
      
        
          <li><a href="../docs/layout-modes.html">Layout modes</a>
        
      
        
          <li><a href="../docs/filtering.html">Filtering</a>
        
      
        
          <li><a href="../docs/sorting.html">Sorting</a>
        
      
        
          <li><a href="../docs/animating.html">Animating</a>
        
      
        
          <li><a href="../docs/adding-items.html">Adding items</a>
        
      
        
          <li><a href="../docs/extending-isotope.html">Extending Isotope</a>
        
      
        
          <li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
        
      
        
          <li><a href="../docs/help.html">Help</a>
        
      
        
          <li><a href="../docs/license.html">License</a>
        
      
    </ul>
    
    <h2>Demos</h2>
    
    <ul>
      
        
          <li><a href="../demos/basic.html">Basic</a>
        
      
        
          <li><a href="../demos/elements-complete.html">Elements Complete</a>
        
      
        
          <li><a href="../demos/elements-partial.html">Elements Partial</a>
        
      
        
          <li><a href="../demos/layout-modes.html">Layout modes</a>
        
      
        
          <li><a href="../demos/filtering.html">Filtering</a>
        
      
        
          <li><a href="../demos/sorting.html">Sorting</a>
        
      
        
          <li><a href="../demos/relayout.html">reLayout</a>
        
      
        
          <li><a href="../demos/adding-items.html">Adding items</a>
        
      
        
          <li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
        
      
        
          <li><a href="../demos/images.html">Images</a>
        
      
        
          <li><a href="../demos/combination-filters.html">Combination filters</a>
        
      
        
          <li><a href="../demos/hash-history.html">Hash history</a>
        
      
        
          <li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
        
      
        
          <li><a href="../demos/removing.html">Removing</a>
        
      
    </ul>
    
    <h2>Custom layout modes</h2>
    
    <ul>
      
        
          <li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
        
      
        
          <li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
        
      
        
          <li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
        
      
        
          <li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
        
      
        
          <li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
        
      
        
          <li class="current"><a href="#content">BIG Graph</a></li>
        
      
        
          <li><a href="../custom-layout-modes/masonry-column-shift.html">Masonry Column Shift</a>
        
      
    </ul>
    
    <h2><a href="../tests/index.html">Tests</a></h2>
    
  </nav> <!-- #site-nav -->
  
  <section id="content">
    
      <h1>BIG Graph</h1>
    

    <section id="copy">
  <p><a href="../docs/extending-isotope.html">Custom layout mode</a> to replicate the Flash interface of <a href="http://big.dk">big.dk</a>. Similiar to <a href="category-rows.html">Category rows</a>, item elements are grouped by their sorting data into columns.</p>

<div class="highlight"><pre><code class="javascript"><span class="nx">$container</span><span class="p">.</span><span class="nx">isotope</span><span class="p">({</span>
  <span class="nx">layoutMode</span><span class="o">:</span> <span class="s1">&#39;bigGraph&#39;</span><span class="p">,</span>
  <span class="nx">bigGraph</span><span class="o">:</span> <span class="p">{</span>
    <span class="nx">columnWidth</span><span class="o">:</span> <span class="mi">45</span><span class="p">,</span> <span class="c1">// size of item</span>
    <span class="nx">rowHeight</span><span class="o">:</span> <span class="mi">45</span><span class="p">,</span> <span class="c1">// size of item</span>
    <span class="nx">maxRows</span><span class="o">:</span> <span class="mi">11</span><span class="p">,</span> <span class="c1">// max number of items vertically</span>
    <span class="nx">gutterWidth</span><span class="o">:</span> <span class="p">{</span> <span class="c1">// width of gutter, needs to match getSortData names</span>
      <span class="nx">year</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
      <span class="nx">scale</span><span class="o">:</span> <span class="mi">60</span><span class="p">,</span>
      <span class="nx">program</span><span class="o">:</span> <span class="mi">40</span><span class="p">,</span>
      <span class="nx">status</span><span class="o">:</span> <span class="mi">60</span><span class="p">,</span>
      <span class="nx">title</span><span class="o">:</span> <span class="mi">0</span>
    <span class="p">}</span>
  <span class="p">},</span>
  <span class="c1">// options...</span>
<span class="p">});</span>
</code></pre>
</div>


  <p>To use this layout mode, grab the <code>$.Isotope.prototype</code> methods from the script at the bottom of this page's source.</p>

</section>

<section id="options" class="clearfix">

    <h3>Sort</h3>

    <ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
      <li><a href="#sortBy=year" data-option-value="year" class="selected" data>Chronological</a></li>
      <li><a href="#sortBy=title" data-option-value="title">Alphabetical</a></li>
      <li><a href="#sortBy=program" data-option-value="program">Programmatic</a></li>
      <li><a href="#sortBy=scale" data-option-value="scale">Scale</a></li>
      <li><a href="#sortBy=status"  data-option-value="status">Status</a></li>
    </ul>

</section> <!-- #options -->

<div id="container" class="big-graph clearfix">
  
</div> <!-- #container -->


<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../jquery.isotope.min.js"></script>
<script src="../js/make-big-graph-projects.js"></script> 
<script>

  // categoryRows custom layout mode
  $.extend( $.Isotope.prototype, {

    _bigGraphReset : function() {
      this.bigGraph = {
        x : 0,
        y : 0,
        height : 0,
        column: 0,
        row: 0,
        gutter: 0,
        currentCategory : null
      };
    },

    _bigGraphLayout : function( $elems ) {
      var instance = this,
          containerWidth = this.element.width(),
          bigGraphOpts = this.options.bigGraph,
          sortBy = this.options.sortBy,
          elemsGroup = {},
          props = this.bigGraph;

      // group item elements into categories based on their sorting data
      $elems.each( function() {
        var category = $.data( this, 'isotope-sort-data' )[ sortBy ];
        elemsGroup[ category ] = elemsGroup[ category ] || [];
        elemsGroup[ category ].push( this );
      });
  
      var group, groupName, groupMaxRows, groupLen,
          gutterWidth = bigGraphOpts.gutterWidth[ sortBy ],
          x, y;
      // for each group...
      for ( groupName in elemsGroup ) {
        group = elemsGroup[ groupName ];
        groupLen = group.length;
        // make groups look nice, by limiting rows, makes for blockier blocks
        groupMaxRows = groupLen / Math.ceil( groupLen / bigGraphOpts.maxRows );

        $.each( group, function( i, elem ) {
          x = props.column * bigGraphOpts.columnWidth + props.gutter * gutterWidth;
          y = (bigGraphOpts.maxRows - props.row - 1) * bigGraphOpts.rowHeight;
          instance._pushPosition( $(elem), x, y );
          
          if ( props.row >= groupMaxRows - 1 ) {
            // start a new column
            props.row = 0;
            props.column++;
          } else {
            props.row++;
          }
        });
        // start a new group
        if ( props.row > 0 ) {
          props.row = 0;
          props.column++;
        }
        props.gutter++;
      }
      props.gutter--;
      props.width = props.column * bigGraphOpts.columnWidth + props.gutter * gutterWidth;
    },

    _bigGraphGetContainerSize : function () {
      bigGraphOpts = this.options.bigGraph;
      this.bigGraph.column++;
      return {
        width: this.bigGraph.width,
        height: bigGraphOpts.maxRows * bigGraphOpts.rowHeight
      };
    },

    _bigGraphResizeChanged : function() {
      return false;
    }

  });


  $(function(){
    
    // -------- dynamically create items ---------------- //
    
    var i = 120,
        projects = [];
    
    while (i--) {
      projects.push( makeBigGraphProject() );
    }

    var $container = $('#container');
    
    $container.append( $( projects.join('') ) );
    
    // -------- isotope ---------------- //
    
    $container.isotope({
      itemSelector: '.project',
      layoutMode: 'bigGraph',
      bigGraph: {
        columnWidth: 45, // size of item
        rowHeight: 45, // size of item
        maxRows: 11, // max number of items vertically
        gutterWidth: { // width of gutter, needs to match getSortData names
          year: 0,
          scale: 0,
          program: 35,
          status: 80,
          title: 0
        }
      },
      sortBy: 'year',
      getSortData: {
        year: function( $elem ) {
          return $elem.attr('data-year');
        },
        scale: function( $elem ) {
          return $elem.attr('data-scale');
        },
        program: function( $elem ) {
          return $elem.attr('data-program');
        },
        status: function( $elem ) {
          return $elem.attr('data-status');
        },
        title: function( $elem ) {
          var chara = $elem.find('p').text()[0];
          return isNaN( parseInt( chara ) ) ? chara : '0';
        }
      }
    });
      
    
      var $optionSets = $('#options .option-set'),
          $optionLinks = $optionSets.find('a');

      $optionLinks.click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');
  
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
          // changes in layout modes need extra logic
          changeLayoutMode( $this, options )
        } else {
          // otherwise, apply new options
          $container.isotope( options );
        }
        
        return false;
      });


    
  });
</script>

    
    <footer>
      Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
    </footer>
    
  </section> <!-- #content -->
  

</body>
</html>